<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="n1">

    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" @click="calc">

    <input type="text" v-model="result">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '+'
      },
      methods: {
        calc() { // 计算器计算的方法
          // switch (this.opt) {
          //   case '+':
          //     this.result = parseInt(this.n1) + parseInt(this.n2);
          //     break;
          //   case '-':
          //     this.result = parseInt(this.n1) - parseInt(this.n2);
          //     break;
          //   case '*':
          //     this.result = parseInt(this.n1) * parseInt(this.n2);
          //     break;
          //   case '/':
          //     this.result = parseInt(this.n1) / parseInt(this.n2);
          //     break;
          // }

          // eval() 解析要计算的字符串(尽量少用)
          var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
          this.result = eval(codeStr);
        }
      }
    });
  </script>



</body>

</html>
